<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据管理 - 第二课堂素质拓展学分评定系统</title>
    
    <!-- 外部资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <!-- CSS 框架 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/styles.css">
    
    <!-- 配置文件 -->
    <script src="js/config.js"></script>
</head>
<body class="bg-gray-50">
    <div class="flex flex-col h-screen">
        <!-- 头部导航 - 简约设计 -->
        <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shadow-sm">
            <div class="flex items-center space-x-4">
                <img src="images/log.svg" alt="logo" class="h-12 w-12">
                <span class="text-xl font-semibold text-gray-900">第二课堂素质拓展学分评定系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-600">
                    <i class="fas fa-user-circle text-xl mr-2"></i>
                    管理员：Web课程设计小组（6）
                </span>
                <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200 btn-hover">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    退出登录
                </button>
            </div>
        </header>

        <div class="flex flex-1 overflow-hidden">
            <!-- 侧边栏 - 简约设计 -->
            <aside class="sidebar">
                <nav class="py-4">
                    <div class="px-4 py-2">
                        <div class="text-gray-500 text-sm font-medium mb-2">主要功能</div>
                        <div class="space-y-1">
                            <a href="student-management.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-users w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学生管理</span>
                            </a>
                            <div class="group">
                                <a href="data-management.html" class="nav-item active flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded">
                                    <i class="fas fa-database w-5 h-5 flex items-center justify-center"></i>
                                    <span class="ml-3">数据管理</span>
                                </a>
                                <!-- 二级菜单 -->
                                <div class="ml-8 mt-1 space-y-1 hidden group-hover:block">
                                    <a href="#data-import" class="block text-gray-600 hover:text-blue-600 text-sm">数据导入</a>
                                    <a href="#data-export" class="block text-gray-600 hover:text-blue-600 text-sm">数据导出</a>
                                    <a href="#data-query" class="block text-gray-600 hover:text-blue-600 text-sm">数据查询</a>
                                </div>
                            </div>
                            <a href="statistics-analysis.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-chart-bar w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">统计分析</span>
                            </a>
                            <a href="credit-warning.html" class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-exclamation-triangle w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学分警示</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </aside>
            
            <!-- 主内容区域 - 数据管理 -->
            <main class="main-content p-6 overflow-auto">
                <div class="mb-6">
                    <!-- 页面标题和面包屑 -->
                    <div class="flex items-center justify-between mb-6">
                        <div>
                            <h1 class="text-2xl font-semibold text-gray-900 mb-2">数据管理</h1>
                            <nav class="text-sm text-gray-500">
                                <span>首页</span>
                                <span class="mx-2">/</span>
                                <span class="text-blue-600">数据管理</span>
                            </nav>
                        </div>
                        <div class="flex space-x-3">
                            <button onclick="window.location.href='data-query.html'" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200">
                                <i class="fas fa-search mr-2"></i>数据查询
                            </button>
                            <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200">
                                <i class="fas fa-sync-alt mr-2"></i>刷新数据
                            </button>
                        </div>
                    </div>
                    
                    <!-- 数据管理二级菜单内容区域 -->
                    <div class="bg-white rounded-xl shadow p-6 mb-8">
                        <div class="flex space-x-4 mb-4">
                            <button id="tabDataOverview" class="px-4 py-2 rounded bg-blue-600 text-white">数据概览</button>
                            <button id="tabDataQuery" class="px-4 py-2 rounded bg-gray-200 text-gray-700">数据查询</button>
                        </div>
                        <div id="dataOverviewPanel">
                            <!-- 数据概览卡片 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                                <div class="bg-white p-6 rounded-xl border border-gray-200 card-hover shadow-sm hover:shadow-md transition-all duration-300">
                                    <div class="flex items-center">
                                        <div class="p-3 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl">
                                            <i class="fas fa-users text-blue-600 text-xl"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-medium text-gray-600">总学生数</p>
                                            <p class="text-2xl font-bold text-gray-900" id="totalStudentCount">1,234</p>
                                            <p class="text-xs text-green-600 mt-1">
                                                <i class="fas fa-arrow-up mr-1"></i>+12% 较上月
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white p-6 rounded-xl border border-gray-200 card-hover shadow-sm hover:shadow-md transition-all duration-300">
                                    <div class="flex items-center">
                                        <div class="p-3 bg-gradient-to-br from-green-100 to-green-200 rounded-xl">
                                            <i class="fas fa-database text-green-600 text-xl"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-medium text-gray-600">数据记录</p>
                                            <p class="text-2xl font-bold text-gray-900">5,678</p>
                                            <p class="text-xs text-green-600 mt-1">
                                                <i class="fas fa-arrow-up mr-1"></i>+8% 较上月
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white p-6 rounded-xl border border-gray-200 card-hover shadow-sm hover:shadow-md transition-all duration-300">
                                    <div class="flex items-center">
                                        <div class="p-3 bg-gradient-to-br from-yellow-100 to-yellow-200 rounded-xl">
                                            <i class="fas fa-clock text-yellow-600 text-xl"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-medium text-gray-600">最后更新</p>
                                            <p class="text-lg font-bold text-gray-900">2小时前</p>
                                            <p class="text-xs text-blue-600 mt-1">
                                                <i class="fas fa-check-circle mr-1"></i>数据正常
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-white p-6 rounded-xl border border-gray-200 card-hover shadow-sm hover:shadow-md transition-all duration-300">
                                    <div class="flex items-center">
                                        <div class="p-3 bg-gradient-to-br from-red-100 to-red-200 rounded-xl">
                                            <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-sm font-medium text-gray-600">异常数据</p>
                                            <p class="text-2xl font-bold text-gray-900" id="abnormalCount">23</p>
                                            <p class="text-xs text-red-600 mt-1">
                                                <i class="fas fa-arrow-down mr-1"></i>-5% 较上月
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 快速操作区域 -->
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                                <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200" id="data-import">
                                    <div class="flex items-center justify-between mb-4">
                                        <h3 class="text-lg font-semibold text-blue-900">数据导入</h3>
                                        <i class="fas fa-upload text-blue-600 text-xl"></i>
                                    </div>
                                    <p class="text-blue-700 text-sm mb-4">支持Excel、CSV、JSON等多种格式的数据导入</p>
                                    <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                        开始导入
                                    </button>
                                </div>
                                <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200" id="data-export">
                                    <div class="flex items-center justify-between mb-4">
                                        <h3 class="text-lg font-semibold text-green-900">数据导出</h3>
                                        <i class="fas fa-download text-green-600 text-xl"></i>
                                    </div>
                                    <p class="text-green-700 text-sm mb-4">支持多种格式导出，包含完整的数据报表</p>
                                    <button class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                                        开始导出
                                    </button>
                                </div>
                                <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl border border-purple-200" id="data-query">
                                    <div class="flex items-center justify-between mb-4">
                                        <h3 class="text-lg font-semibold text-purple-900">数据查询</h3>
                                        <i class="fas fa-search text-purple-600 text-xl"></i>
                                    </div>
                                    <p class="text-purple-700 text-sm mb-4">多维度高级查询，支持复杂条件筛选</p>
                                    <button onclick="window.location.href='data-query.html'" class="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors duration-200">
                                        开始查询
                                    </button>
                                </div>
                            </div>

                            <!-- 数据操作区域 -->
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                                <!-- 数据导入详情 -->
                                <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                                    <div class="flex items-center justify-between mb-4">
                                        <h2 class="text-lg font-semibold text-gray-900">数据导入</h2>
                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">推荐</span>
                                    </div>
                                    <div class="space-y-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">选择文件类型</label>
                                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                <option>Excel文件 (.xlsx)</option>
                                                <option>CSV文件 (.csv)</option>
                                                <option>JSON文件 (.json)</option>
                                                <option>XML文件 (.xml)</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">选择文件</label>
                                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors duration-200">
                                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                                                <p class="text-gray-600 mb-2">拖拽文件到此处或点击选择文件</p>
                                                <p class="text-xs text-gray-500 mb-3">支持的文件大小：最大 50MB</p>
                                                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                                    选择文件
                                                </button>
                                            </div>
                                        </div>
                                        <div class="flex space-x-3">
                                            <button class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                                <i class="fas fa-upload mr-2"></i>开始导入
                                            </button>
                                            <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                                                <i class="fas fa-eye mr-2"></i>预览
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 数据导出详情 -->
                                <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                                    <div class="flex items-center justify-between mb-4">
                                        <h2 class="text-lg font-semibold text-gray-900">数据导出</h2>
                                        <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">热门</span>
                                    </div>
                                    <div class="space-y-4">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">导出格式</label>
                                            <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                <option>Excel文件 (.xlsx)</option>
                                                <option>CSV文件 (.csv)</option>
                                                <option>JSON文件 (.json)</option>
                                                <option>PDF报告 (.pdf)</option>
                                                <option>Word文档 (.docx)</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">数据范围</label>
                                            <div class="space-y-2">
                                                <label class="flex items-center">
                                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                    <span class="ml-2 text-sm text-gray-700">学生基本信息</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                    <span class="ml-2 text-sm text-gray-700">学分记录</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                    <span class="ml-2 text-sm text-gray-700">统计报表</span>
                                                </label>
                                                <label class="flex items-center">
                                                    <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                    <span class="ml-2 text-sm text-gray-700">活动记录</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="flex space-x-3">
                                            <button class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                                                <i class="fas fa-download mr-2"></i>开始导出
                                            </button>
                                            <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                                                <i class="fas fa-cog mr-2"></i>设置
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 数据备份和监控 -->
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                                <!-- 数据备份 -->
                                <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                                    <h2 class="text-lg font-semibold text-gray-900 mb-4">数据备份</h2>
                                    <div class="space-y-4">
                                        <div class="p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-lg border border-green-200">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-sm font-medium text-green-800">自动备份</span>
                                                <span class="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">已启用</span>
                                            </div>
                                            <p class="text-xs text-green-700 mb-2">每日凌晨2点自动备份</p>
                                            <div class="flex space-x-2">
                                                <button class="text-xs text-green-600 hover:text-green-800">修改设置</button>
                                                <button class="text-xs text-green-600 hover:text-green-800">查看备份</button>
                                            </div>
                                        </div>
                                        
                                        <div class="p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg border border-blue-200">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-sm font-medium text-blue-800">手动备份</span>
                                                <span class="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded-full">可用</span>
                                            </div>
                                            <p class="text-xs text-blue-700 mb-2">立即创建数据备份</p>
                                            <button class="text-xs text-blue-600 hover:text-blue-800">立即备份</button>
                                        </div>
                                        
                                        <div class="p-4 bg-gradient-to-r from-yellow-50 to-yellow-100 rounded-lg border border-yellow-200">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-sm font-medium text-yellow-800">恢复数据</span>
                                                <span class="text-xs bg-yellow-200 text-yellow-800 px-2 py-1 rounded-full">谨慎</span>
                                            </div>
                                            <p class="text-xs text-yellow-700 mb-2">从备份文件恢复数据</p>
                                            <button class="text-xs text-yellow-600 hover:text-yellow-800">选择备份</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 数据监控 -->
                                <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                                    <h2 class="text-lg font-semibold text-gray-900 mb-4">数据监控</h2>
                                    <div class="space-y-4">
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                            <div class="flex items-center">
                                                <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                                                <span class="text-sm text-gray-700">数据库连接</span>
                                            </div>
                                            <span class="text-xs text-green-600">正常</span>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                            <div class="flex items-center">
                                                <div class="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                                                <span class="text-sm text-gray-700">数据同步</span>
                                            </div>
                                            <span class="text-xs text-green-600">正常</span>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                            <div class="flex items-center">
                                                <div class="w-3 h-3 bg-yellow-500 rounded-full mr-3"></div>
                                                <span class="text-sm text-gray-700">存储空间</span>
                                            </div>
                                            <span class="text-xs text-yellow-600">75%</span>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                            <div class="flex items-center">
                                                <div class="w-3 h-3 bg-red-500 rounded-full mr-3"></div>
                                                <span class="text-sm text-gray-700">异常数据</span>
                                            </div>
                                            <span class="text-xs text-red-600">23条</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 操作日志 -->
                            <div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
                                <div class="flex items-center justify-between mb-4">
                                    <h2 class="text-lg font-semibold text-gray-900">操作日志</h2>
                                    <button class="text-sm text-blue-600 hover:text-blue-800">查看全部</button>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">详情</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-200">
                                            <tr class="hover:bg-gray-50 transition-colors duration-200">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-01-15 14:30</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="flex items-center">
                                                        <i class="fas fa-upload text-blue-600 mr-2"></i>
                                                        数据导入
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张明德</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="status-badge status-success">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 hover:text-blue-800 cursor-pointer">
                                                    查看详情
                                                </td>
                                            </tr>
                                            <tr class="hover:bg-gray-50 transition-colors duration-200">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-01-15 13:45</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="flex items-center">
                                                        <i class="fas fa-download text-green-600 mr-2"></i>
                                                        数据导出
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张明德</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="status-badge status-success">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 hover:text-blue-800 cursor-pointer">
                                                    查看详情
                                                </td>
                                            </tr>
                                            <tr class="hover:bg-gray-50 transition-colors duration-200">
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-01-15 12:20</td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    <span class="flex items-center">
                                                        <i class="fas fa-save text-yellow-600 mr-2"></i>
                                                        数据备份
                                                    </span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">系统</td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <span class="status-badge status-success">成功</span>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600 hover:text-blue-800 cursor-pointer">
                                                    查看详情
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="dataQueryPanel" style="display:none;">
                            <!-- 嵌入data-query.html的主要内容（去除html/head/body，仅main部分） -->
                            <!-- ...粘贴data-query.html的main内容... -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript 文件 -->
    <script src="js/navigation.js"></script>
    <script src="js/main.js"></script>
    <script>
        // 初始化导航
        document.addEventListener('DOMContentLoaded', function() {
            const navigation = new NavigationManager();
            navigation.initPage();
        });

        document.addEventListener('DOMContentLoaded', async function() {
            // 获取学生数据
            const res = await fetch('http://localhost:3000/api/students');
            const students = await res.json();

            // 动态填充总学生数
            const totalStudentCount = document.getElementById('totalStudentCount');
            if (totalStudentCount) {
                totalStudentCount.textContent = students.length;
            }

            // 动态填充异常数据（学分<4）
            const abnormalCount = students.filter(s => s.credits < 4).length;
            const abnormalCountElem = document.getElementById('abnormalCount');
            if (abnormalCountElem) {
                abnormalCountElem.textContent = abnormalCount;
            }
        });

        document.getElementById('tabDataOverview').onclick = function() {
            document.getElementById('dataOverviewPanel').style.display = '';
            document.getElementById('dataQueryPanel').style.display = 'none';
            this.className = 'px-4 py-2 rounded bg-blue-600 text-white';
            document.getElementById('tabDataQuery').className = 'px-4 py-2 rounded bg-gray-200 text-gray-700';
        };
        document.getElementById('tabDataQuery').onclick = function() {
            document.getElementById('dataOverviewPanel').style.display = 'none';
            document.getElementById('dataQueryPanel').style.display = '';
            this.className = 'px-4 py-2 rounded bg-blue-600 text-white';
            document.getElementById('tabDataOverview').className = 'px-4 py-2 rounded bg-gray-200 text-gray-700';
        };
    </script>
</body>
</html> 